<template>
    <div class="charts-wrap">
        <div class="charts-title">灰度值分类等级</div>
        <div class="container">
            <div :id="id" :option="option"></div>
            <div class="label-box">
                <div class="charts-label" v-for="(item, i) in grayELevel" :key="i">
                    <span class="color-block" :style="item.style"></span>
                    {{ item.name }}
                </div>
            </div>
        </div>
        <div class="line-box">
            <div class="line-title">灰度值</div>
            <div class="value-line"></div>
            <div class="value-box">
                <span>&lt;500</span>
                <span>3500</span>
                <span>5000</span>
                <span>6300</span>
                <span>≥9000</span>
            </div>
        </div>
    </div>
</template>

<script>
import HighCharts from 'highcharts';
export default {
    name: 'grayLevelCharts',
    props: {
        // 图表配置数据
        id: String,
    },
    data() {
        return {
            grayELevel: [
                {
                    name: '灰度值高',
                    style: { backgroundColor: '#FF9933' },
                },
                {
                    name: '灰度值较高',
                    style: { backgroundColor: '#FFCC00' },
                },
                {
                    name: '灰度值中',
                    style: { backgroundColor: '#99CC33' },
                },
                {
                    name: '灰度值低',
                    style: { backgroundColor: '#0099CC' },
                },
            ],
            option: {
                chart: {
                    type: 'pie',
                    margin: [0, 0, 0, 0],
                    width: 100,
                    height: 75,
                    options3d: {
                        enabled: true,
                        alpha: 60,
                        beta: 0,
                    },
                    backgroundColor: 'rgba(0,0,0,0)',
                },
                //  版权标签
                credits: {
                    enabled: false,
                },
                // 导出
                exporting: {
                    enabled: false,
                },
                title: {
                    text: '',
                    style: {
                        fontSize: 12,
                    },
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: false,
                        cursor: 'pointer',
                        depth: 15,
                        dataLabels: {
                            enabled: false,
                            format: '{point.name}',
                        },
                    },
                },
                series: [
                    {
                        type: 'pie',
                        animation: false,
                        colors: ['#FF9933', '#FFCC00', '#99CC33', '#0099CC'],
                        data: [
                            ['灰度值高', 17.0],
                            ['灰度值较高', 51.7],
                            ['灰度值中', 22.8],
                            ['灰度值低', 8.5],
                        ],
                    },
                ],
            },
        };
    },
    mounted() {
        HighCharts.chart(this.id, this.option);
    },
};
</script>

<style lang="scss" scoped>
.charts-wrap {
    text-align: center;
    .charts-title {
        font-size: 16px;
    }
    .container {
        text-align: left;
        display: flex;
        flex-direction: row;
        padding: 0 40px 0 40px;
        justify-content: space-between;
        .label-box {
            margin-top: 5px;
        }
        .color-block {
            display: inline-block;
            width: 50px;
            height: 10px;
        }
    }
    .line-box {
        width: 60%;
        margin: 0 auto;
        .line-title {
            text-align: left;
            font-size: 12px;
        }
        .value-line {
            height: 5px;
            background: linear-gradient(to right, #26285f, #0099cc, #99cc33, #ffcc00, #ff9933);
        }
        .value-box {
            display: flex;
            justify-content: space-between;
            span {
                display: inline-block;
            }
            :nth-child(1) {
                transform: translate(-10px);
            }
            :nth-child(2) {
                transform: translate(-10px);
            }
            :nth-child(3) {
                transform: translate(-5px);
            }
            :nth-child(4) {
                transform: translate(5px);
            }
            :nth-child(5) {
                transform: translate(15px);
            }
        }
    }
}
</style>
